<template>
    <div>
        
        <hr />
            <div class="s-header">               
                <img src="../../assets/logo.png" alt />                                
                <span>信息列表</span>                
                <button @click="print">打印</button>
                <button @click="exportWord">导出到word</button>
                <span>&nbsp;</span>
            </div>
        <hr />


    <div class="word">
        <!--startprint-->
        <div v-for="(item, index) in DataList" :key="index" style="margin:25px;">
        <div style="text-align:center; height:28px;"><span>商检编号:</span><span>{{item.new_opportunitiesforbatchnumber}}</span></div>   
        <div style="height:28px;"><span>MODEL(车型):</span><span>{{item.new_modelstodescribe}}</span></div>
        <div style="height:28px;"><span>SERIAL NO(车工号):</span><span>{{item.new_thevehiclefile_id}}</span></div>
        <div style="height:28px;"><span>VIN NO(VIN号):</span><span>{{item.new_vinnumber}}</span></div>       
        <div style="height:28px;"><span>SIZE(长*宽*高):</span><span>{{parseFloat(item.new_long)}}*{{parseFloat(item.new_wide)}}*{{parseFloat(item.new_high)}}</span></div>               
        <!-- 打印时分页处理 加上这句话即可：page-break-after:always-->
        <div style="height:28px; page-break-after:always"><span>SGIPPING MARK(唛头信息):</span><span>{{item.new_mark}}</span></div>      
        </div>
        <!--endprint-->
    </div>
    </div>
</template>

<script>
import { saveAs } from './FileSaver'
import * as docx from './index'
export default {
    data(){
        return{          
            DataList:[
                {
                    new_opportunitiesforbatchnumber : "0",
                    new_modelstodescribe: "GR3423467",
                    new_thevehiclefile_id:"KH4666",
                    new_vinnumber:"GRT6798398",
                    new_long:"12.5",
                    new_wide:"7.93",
                    new_high:"5.3",
                    new_mark:"M/V"
                },
                {
                    new_opportunitiesforbatchnumber : "1",
                    new_modelstodescribe: "ZK09GGH04",
                    new_thevehiclefile_id:"SDFE234",
                    new_vinnumber:"JYWE458795",
                    new_long:"13.7",
                    new_wide:"7.1",
                    new_high:"4.2",
                    new_mark:"N/M"
                },                            
            ]
        };
    },
    mounted() {},
    methods: {       
        //打印
        print(){  
            $(".word").printArea();                 
        },
        //时间格式处理
        formatter (thistime, fmt) {
			let $this = new Date(thistime)
			let o = {
				'M+': $this.getMonth() + 1,
				'd+': $this.getDate(),
				'h+': $this.getHours(),
				'm+': $this.getMinutes(),
				's+': $this.getSeconds(),
				'q+': Math.floor(($this.getMonth() + 3) / 3),
				'S': $this.getMilliseconds()
			}
			if (/(y+)/.test(fmt)) {
				fmt = fmt.replace(RegExp.$1, ($this.getFullYear() + '').substr(4 - RegExp.$1.length))
			}
			for (var k in o) {
				if (new RegExp('(' + k + ')').test(fmt)) {
				fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
				}
			}
			return fmt
		},
        //导出到word
		async exportWord() {
			const doc = new docx.Document()			
			for	(let i = 0; i < this.DataList.length; i ++) {
				var paragraph = {
						children: [
							new docx.TextRun({
								text: 'SGIPPING MARK(唛头信息):'+this.DataList[i].new_mark,
								bold: true,
								size: 28,
								font: {
									name: 'Times New Roman',
								},								
							}),														
						],
					};                               
				if (i != this.DataList.length - 1){
					paragraph.children.push(new docx.PageBreak()); //最后一个不加分页
				}
				doc.addSection({
				headers: {
					default: new docx.Header({  //页眉
						children: [
							new docx.Paragraph({
								//alignment: docx.AlignmentType.CENTER,  //居中
								children: [
									new docx.TextRun({
										text: this.formatter(new Date(), 'yyyy/M/d'),										
										font: {
											name: 'Microdoft YaHei',  //字体设置
										},
                                        bold:true,  //字体加粗
										size: 18,  //字号设置
									}),
									new docx.TextRun({
									text: '         一个不想被猫吃的鱼', //段落文本										
										font: {
											name: 'Times New Roman', //字体设置
										},
										size: 18,
									}),
								],
							}),
						],
					}),
				},
				footers: {//页脚
					default: new docx.Footer({
						children: [
                            new docx.Paragraph({
								//alignment: docx.AlignmentType.CENTER,//居中对齐
								children: [
									new docx.TextRun({                                        
										text: '一个不喜欢吃鱼的猫'+'                           ',										
										font: {
											name: 'Times New Roman',
										},                                      
										size: 18,
									}),
									new docx.TextRun({
									    text: (i+1)+'/'+this.DataList.length,	//简单的做一下页码标记，但显然不能这么做									
										font: {
											name: 'Times New Roman',                                           
										},                                       
                                        bold: true,
										size: 20,
									}),
								],
							})
                        ],
					}),
				},
				margins: {},
				size: 30,
				properties: {},
				children: [	 
                    new docx.Paragraph({
						alignment: docx.AlignmentType.CENTER,//居中
						children: [
							new docx.TextRun({
								text: '商检编号:',	
								bold: true,
								size: 28,
								font: {
									name: 'Times New Roman',
								},							
							}),
							new docx.TextRun({
								text: this.DataList[i].new_opportunitiesforbatchnumber,
								bold: true,
								size: 28,
								font: {
									name: 'Times New Roman',
								},								
							}),							
						],
					}),  
                    //段落设置，一个段落即一个“new docx.Paragraph()”，相当于换行符               									
					new docx.Paragraph({
						children: [
                            //如果对Text文本内容有严格的字体、字号、加粗等要求，可用new docx.TextRun()方法独立出来，单独处理
							new docx.TextRun({
								text: 'MODEL(车型):'+this.DataList[i].new_modelstodescribe,
								bold: true,
								size: 28,
								font: {
									name: 'Times New Roman',
								},								
							}),	
                            // new docx.TextRun({
							// 	text: this.DataList[i].new_modelstodescribe,
							// 	bold: true,
							// 	size: 32,
							// 	font: {
							// 		name: 'Microdoft YaHei',  //微软雅黑
							// 	},								
							// }),																			
						],
					}),
					new docx.Paragraph({
						children: [
							new docx.TextRun({
								text: 'SERIAL NO(车工号):'+this.DataList[i].new_thevehiclefile_id,
								bold: true,
								size: 28,
								font: {
									name: 'Times New Roman',
								},								
							}),																			
						],
					}),
					new docx.Paragraph({
						children: [
							new docx.TextRun({
								text: 'VIN NO(VIN号):'+this.DataList[i].new_vinnumber,
								bold: true,
								size: 28,
								font: {
									name: 'Times New Roman',
								},								
							}),																			
						],
					}),					
					new docx.Paragraph({
						children: [
							new docx.TextRun({
								text: 'SIZE(长*宽*高):'+parseFloat(this.DataList[i].new_long)+'*'+parseFloat(this.DataList[i].new_wide)+'*'+parseFloat(this.DataList[i].new_high),
								bold: true,
								size: 28,
								font: {
									name: 'Times New Roman',
								},								
							}),																				
						],
					}),										
                    //分页方法：new docx.PageBreak()
					new docx.Paragraph(paragraph),
				],
			    })
			}			

			docx.Packer.toBlob(doc).then((blob) => {
				saveAs(blob, '导出测试.docx');	//最后一个参数为：导出文件名，可自定义			
			})
		},    
    },
}
</script>
<style lang="less" scoped>
.s-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 30px;
  img{   
    margin-left: 20px;  
    width: 20px;
    height: 20px;
  }
}
.s-header-a {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 30px;
    img{  
        width: 20px;
        height: 20px;
    }
    span{
        margin-left: 5px;
    }
}
.s-header-b {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 30px;
    img{ 
        margin-left: 10px; 
        width: 20px;
        height: 20px;
    }
    span{
        margin-left: 5px;
    }
}
// .header-icon {
//   background: #616063;
//   border-radius: 50%;
//   margin-right: 10px;
//   height: 2em;
//   width: 2em;
//   display: flex;
//   justify-content: center;
//   align-items: center;
//   img {
//     width: 1em;
//   }
// }

</style>
